import React from 'react'
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Button, Layout, theme } from 'antd';
import { useState, useEffect } from 'react';
import Bus from '@/utils/events'
// 引入面包屑导航组件
import Appbreadcrumb from '@/components/Appbreadcrumb';

// 引入退出登录组件
import Apploginout from '@/components/Apploginout'

const { Header } = Layout;
type Props = {}

export default function Appheader({ }: Props) {
    const [collapsed, setCollapsed] = useState(false);
    // console.log('Appheader函数组件执行');
    // 方式1:
    useEffect(() => {
        // 将collapsed 属性传递给Appaside 组件
        Bus.emit('myevents', collapsed)
        // console.log(" Bus.emit('myevents', collapsed)");
    }, [collapsed])
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    return (
        <Header style={{
            padding: 0,
            background: colorBgContainer,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingRight: '20px'
        }}>
            {/*折叠图标  */}
            <div style={{
                display: 'flex',
                alignItems: 'center',
            }}>
                <Button
                    type="text"
                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                    onClick={() => {
                        setCollapsed(!collapsed)
                        // 方式2
                        // setCollapsed(() => {
                        //     let collapsed1 = !collapsed
                        //     // console.log('collapsed1', collapsed1);
                        //     Bus.emit('myevents', collapsed1)
                        //     return collapsed1
                        // })
                        // 方式3:
                        // setCollapsed(!collapsed)
                        // Bus.emit('myevents', !collapsed)
                    }}
                    style={{
                        fontSize: '16px',
                        width: 64,
                        height: 64,
                    }}
                />
                {/* 面包屑导航 */}
                <Appbreadcrumb></Appbreadcrumb>
            </div>
            {/* 退出登录组件 */}
            <Apploginout></Apploginout>

        </Header >
    )
}